<template>
  <div id="productsList">
    <header>
      <h2>保险产品</h2>
    </header>
    <template>
      <el-table :data="productsList" border style="width: 100%">
        <el-table-column
          prop="name"
          label="产品名称"
          width="120"
        ></el-table-column>
        <el-table-column prop="img" label="产品图片">
          <!-- 头像 -->
          <template slot-scope="scope">
            <img
              :src="'http://localhost:3000/temp/' + scope.row.img"
              alt=""
              fit="contain"
              width="100px"
            />
          </template> </el-table-column
        >2
        <el-table-column
          prop="time"
          label="保险期限(/月)"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="number"
          label="购买份数"
          width="80"
        ></el-table-column>
        <el-table-column prop="ageOfCoverage" label="承保年龄">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{
              scope.row.ageOfCoverage.join("-")
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="totalNumber" label="产品总数"></el-table-column>

        <el-table-column prop="describe" label="产品描述">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <p>描述: {{ scope.row.describe }}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.name }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="comment" label="用户评论"></el-table-column> -->
        <el-table-column prop="money" label="金额"></el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <span
              style="margin-left: 10px; color: skyblue"
              v-if="scope.row.state == 1"
              >未购买</span
            >
            <span
              style="margin-left: 10px; color: red"
              v-else-if="scope.row.state == 2"
              >已加入购物车</span
            >
            <span
              style="margin-left: 10px; color: gray"
              v-else-if="scope.row.state == 3"
              >不可购买</span
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="belongToClassifys.name"
          label="所属分类"
        ></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              class="but"
              size="mini"
              @click="
                handleEdit(scope.$index, scope.row);
                dialogVisible = true;
              "
              type="primary"
              style="margin-left: 16px"
            >
              修改</el-button
            >
            <el-button
              class="butt"
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
            <!-- <el-button @click="drawer = true" type="primary" style="margin-left: 16px;">点我打开</el-button>  -->
            <!-- 修改弹框 -->
            <el-dialog title="提示" :visible.sync="dialogVisible" width="35%">
              <!-- 修改表格 -->
              <el-radio-group v-model="labelPosition" size="small">
                <el-radio-button label="left">左对齐</el-radio-button>
                <el-radio-button label="right">右对齐</el-radio-button>
                <el-radio-button label="top">顶部对齐</el-radio-button>
              </el-radio-group>
              <div style="margin: 20px"></div>
              <el-form
                :label-position="labelPosition"
                label-width="80px"
                :model="upProducts"
              >
                <el-form-item label="产品名称">
                  <el-input v-model.lazy="upProducts.name"></el-input>
                </el-form-item>
                <el-form-item label="保险期限(/月)">
                  <el-input v-model="upProducts.time"></el-input>
                </el-form-item>
                <el-form-item label="购买份数">
                  <el-input v-model="upProducts.number"></el-input>
                </el-form-item>

                <el-form-item label="产品总数">
                  <el-input v-model="upProducts.totalNumber"></el-input>
                </el-form-item>
                <el-form-item label="产品描述">
                  <el-input v-model="upProducts.describe"> </el-input>
                </el-form-item>

                <!-- <el-form-item label="用户评论">
                  <el-input v-model=" upProducts.comment"></el-input>
                </el-form-item> -->
                <el-form-item label="金额">
                  <el-input v-model="upProducts.money"></el-input>
                </el-form-item>
                <el-form-item label="状态">
                  <el-input
                    v-model="upProducts.state"
                    placeholder="a"
                    style="width: 60px"
                  ></el-input>
                  <span>1:可购买</span>
                  <span>2:已加入购物车</span>
                  <span>3:已购买</span>
                </el-form-item>
                <!-- <el-form-item label="活动形式">
                  <p>{{ claims.name }}</p>
                </el-form-item> -->
              </el-form>
              <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="upProduct" :plain="true"
                  >确 定</el-button
                >
              </span>
            </el-dialog>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[3, 5, 6, 7]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { createNamespacedHelpers } from "vuex";
const { mapActions, mapState, mapMutations } = createNamespacedHelpers(
  "productsManages"
);
export default {
  created() {
    //获取保险产品数据
    this.getProducts();
  },
  data() {
    return {
      dialogVisible: false,
      labelPosition: "right",
      upProducts: [
        {
          _id: "",
          name: "",
          time: "",
          number: 0,
          totalNumber: 0,
          describe: "",
          money: 0,
          state: "",
        },
      ],
    };
  },
  watch: {
    currentPage() {
      this.getProducts();
    },
    pageSize() {
      this.getProducts();
    },
  },
  computed: {
    ...mapState(["productsList", "total", "currentPage", "pageSize"]),
  },
  methods: {
    ...mapActions(["getProducts", "deleteProducts", "modifyProducts"]),
    ...mapMutations(["getPageSize", "getcurrentPage"]),
    //修改保险产品数据
    handleEdit(index, row) {
      // console.log(index, row);
      this.upProducts = { ...row };
    },
    //删除
    async handleDelete(index, row) {
      // console.log(index, row);
      const data = await this.deleteProducts({ _id: row._id });

      if (data.data.status == 1) {
        alert("删除成功");
        this.getProducts();
      } else {
        alert("删除失败");
      }
    },
    //确认修改产品信息
    async upProduct() {
      this.dialogVisible = false;
      const data = await this.modifyProducts(this.upProducts);
      if (data.data.status == 1) {
        this.getProducts();
        this.$message({
          message: "恭喜你，修改成功",
          type: "success",
        });
      } else {
        this.$message.error("修改保险产品数据失败");
      }
    },
    //每页几条数据
    handleSizeChange(val) {
      this.getPageSize(val);
      // this.getProducts();
    },
    //当前是第几页
    handleCurrentChange(val) {
      this.getcurrentPage(val);
      // this.getProducts();
    },
  },
};
</script>

<style lang="scss" scoped>
#productsList {
  header {
    border-bottom: 1px solid rebeccapurple;
    text-align: left;
    th {
      text-align: center;
    }
  }
  .el-table {
    margin-top: 20px;
    text-align: center;
    .el-table-column {
      text-align: center;
    }
    .cell {
      padding: 0px;
      text-align: center;
    }
  }
  .block {
    margin-top: 50px;
  }
  .but {
    margin: 0 auto;
  }
  .butt {
    margin: auto;
    margin-left: 16px;
  }
}
// .insList {
//   text-align: left;
// }
</style>